<template>
  <f7-page class="home-2">


    <!-- <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center;position: absolute;z-index: 100; color: #fff">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #fff"></f7-icon></f7-link></div>
      <div class="title">首页</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #fff"></f7-icon></f7-link></div>
    </div> -->

    <!-- <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">首页</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div> -->


    <div class="banner">
      <img src="static/img/home/banner-2.png" alt="" />
      <div class="title">
        <p>智慧食堂</p>
        <p class="subtitle"><i>CANTEEN</i></p>
      </div>
    </div>

    <qm-navigat-bar class="qm-navigat-bar" :data="navigatBar" iconWidth="60"></qm-navigat-bar>
    <f7-block class="function-list">
      <qm-entry
        class="function-list-item"
        v-for="(item, index) in entry"
        :key="index"
        :data="item"
        iconWidth="64"
      ></qm-entry>
    </f7-block>

    <f7-block>
      <qm-block
        title="资讯"
        style="background: #fff; border-radius: calc(16px * var(--ratio))"
      >
        <f7-link
          href="#"
          slot="after-title"
          style="color: var(--color-text-subtext)"
        >
          更多资讯
          <f7-icon
            f7="chevron_right"
            style="font-size: var(--font-size-subcontent-2)"
          ></f7-icon>
        </f7-link>

        <div>
          <qm-consult-list
            v-for="(item, index) in consult"
            :key="index"
            :data="item"
          ></qm-consult-list>
        </div>
      </qm-block>
    </f7-block>

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      navigatBar: [
        {
          image: "static/img/home/home-2/icon-home-fun1.svg",
          title: "一码通",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-2/icon-home-fun2.svg",
          title: "电子卡",
        },
        {
          image: "static/img/home/home-2/icon-home-fun3.svg",
          title: "通知/消息",
        },
      ],
      entry: [
        { image: "static/img/home/home-2/entry-1.svg", title: "电子卡" },
        { image: "static/img/home/home-2/entry-2.svg", title: "充值" },
        { image: "static/img/home/home-2/entry-3.svg", title: "充值记录" },
        { image: "static/img/home/home-2/entry-4.svg", title: "消费记录" },
        { image: "static/img/home/home-2/entry-5.svg", title: "我的订单" },
        { image: "static/img/home/home-2/entry-6.svg", title: "退款申请" },
      ],
      consult: [
        {
          image: "static/img/home/consult-1.png",
          title: "银行利率已经上调5%，将影响楼…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "天津市滨海新区8项指标成为全…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "开展照片征集活动通知",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "疫情防控不放松 个人防护第一位 进一步做好预防",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-2.png",
          title: "天津市滨海新区13项指标成为全国标杆",
          time: "2022-03-16  12:00",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.home-2 {
  background: var(--color-fill-background);
  .banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56%;
    .title {
      position: absolute;
      top: 50%;
      left: calc(32px * var(--ratio));
      transform: translateY(-50%);
      color: var(--color-text-base);
      font-weight: 600;
      font-size: calc(54px * var(--ratio));
      p {
        margin: 0;
      }
      .subtitle {
        font-size: calc(64px * var(--ratio));
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.08) 0%,
          rgba(255, 255, 255, 0.29) 99%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .qm-navigat-bar {
    height: calc(176px * var(--ratio));
    margin-top: calc(-77px * var(--ratio));
  }

  .function-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(46px * var(--ratio));
    text-align: center;
    &-item {
      margin: 0 auto;
    }
  }
}
</style>
